import React from 'react';
import { Users, Plus, Edit3, Trash2, Wifi, WifiOff, AlertCircle } from 'lucide-react';
import { useApp } from '../../../contexts/AppContext';
import { Account } from '../types';
import clsx from 'clsx';

export function AccountList() {
  const { state } = useApp();

  const getStatusIcon = (status: Account['status']) => {
    switch (status) {
      case 'online':
        return <Wifi className="text-green-500" size={16} />;
      case 'offline':
        return <WifiOff className="text-gray-400" size={16} />;
      case 'error':
        return <AlertCircle className="text-red-500" size={16} />;
      case 'checking':
        return <div className="animate-spin h-4 w-4 border-2 border-blue-500 border-t-transparent rounded-full"></div>;
      default:
        return <WifiOff className="text-gray-400" size={16} />;
    }
  };

  const getStatusText = (status: Account['status']) => {
    switch (status) {
      case 'online': return '在线';
      case 'offline': return '离线';
      case 'error': return '错误';
      case 'checking': return '检测中';
      default: return '未知';
    }
  };

  return (
    <div className="p-6">
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center space-x-2">
          <Users className="text-blue-500" size={24} />
          <h1 className="text-2xl font-semibold text-gray-800">账号管理</h1>
        </div>
        <button className="flex items-center space-x-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
          <Plus size={16} />
          <span>添加账号</span>
        </button>
      </div>

      <div className="bg-white rounded-lg shadow-sm border">
        <div className="grid grid-cols-6 px-4 py-3 bg-gray-50 border-b text-sm font-medium text-gray-600">
          <div className="col-span-2">账号信息</div>
          <div>平台</div>
          <div>状态</div>
          <div>最后活跃</div>
          <div className="text-center">操作</div>
        </div>

        {state.accounts.length === 0 ? (
          <div className="px-6 py-12 text-center text-gray-500">
            <Users className="mx-auto mb-4 text-gray-300" size={48} />
            <p className="mb-4">暂无账号</p>
            <button className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
              添加第一个账号
            </button>
          </div>
        ) : (
          state.accounts.map((account) => (
            <div
              key={account.id}
              className="grid grid-cols-6 px-4 py-3 border-b hover:bg-gray-50 items-center"
            >
              <div className="col-span-2">
                <div className="font-medium text-gray-800">{account.username}</div>
                {account.备注 && (
                  <div className="text-sm text-gray-500">{account.备注}</div>
                )}
              </div>
              
              <div className="text-sm text-gray-600">{account.platform}</div>
              
              <div className="flex items-center space-x-2">
                {getStatusIcon(account.status)}
                <span className="text-sm">{getStatusText(account.status)}</span>
              </div>
              
              <div className="text-sm text-gray-500">
                {account.lastActive ? new Date(account.lastActive).toLocaleString() : '从未登录'}
              </div>
              
              <div className="flex items-center justify-center space-x-2">
                <button className="p-2 text-blue-500 hover:bg-blue-50 rounded" title="编辑">
                  <Edit3 size={14} />
                </button>
                <button className="p-2 text-red-500 hover:bg-red-50 rounded" title="删除">
                  <Trash2 size={14} />
                </button>
              </div>
            </div>
          ))
        )}
      </div>

      <div className="mt-4 flex items-center justify-between text-sm text-gray-500">
        <span>共 {state.accounts.length} 个账号</span>
        <div className="flex items-center space-x-4">
          <span className="flex items-center space-x-1">
            <Wifi className="text-green-500" size={14} />
            <span>{state.accounts.filter(a => a.status === 'online').length} 在线</span>
          </span>
          <span className="flex items-center space-x-1">
            <WifiOff className="text-gray-400" size={14} />
            <span>{state.accounts.filter(a => a.status === 'offline').length} 离线</span>
          </span>
          <span className="flex items-center space-x-1">
            <AlertCircle className="text-red-500" size={14} />
            <span>{state.accounts.filter(a => a.status === 'error').length} 异常</span>
          </span>
        </div>
      </div>
    </div>
  );
}